<template>
<div class="addActiveBaseinfo">
      <div class="baseInfor-left">
            <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="活动名称">
                        <el-input placeholder="活动名称" v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="活动类型">
                        <el-select v-model="form.region" placeholder="选择活动类型">
                        <el-option label="捐赠活动" value="shanghai"></el-option>
                        <el-option label="满赠活动" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="活动时间">
                        <el-col :span="11">
                        <el-date-picker type="date" placeholder="开始日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                        </el-col>
                        <el-col class="line" :span="2">-</el-col>
                        <el-col :span="11">
                        <el-date-picker type="date" placeholder="结束日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="活动描述">
                        <el-input type="textarea" :rows="3" placeholder="多行输入" v-model="form.desc"></el-input>
                    </el-form-item>
            </el-form>
      </div>
      <div class="baseInfor-right">
               <span>活动图片</span>
               <setAvatar title="上传或修改商品图片" />
      </div>
</div>
</template>



<script>
import setAvatar from '~/components/setAvatar'
export default {
  components: {
      setAvatar
  },
   data() {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
}
</script>
<style lang="scss">
.addActiveBaseinfo{
   background-color: #ffffff;
   position:relative;
   top:50px;
   padding:20px 50px;
   height:320px;
.baseInfor-left{
    width:50%;
    float:left;
    &:before {
      content: "";
      display: block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: #333856;
      position: absolute;
      top: 36px;
      left: 29px;
    }
   .el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 16px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }
    .el-textarea__inner{
        width:50%;
        background-color: #f0f5fb
    }
    .el-input__inner {
    height: 25px;
    width:130px;
    background-color: #f0f5fb;
    border-radius: 9px;
    vertical-align: middle;
    border: none;
    padding: 0 10px;
    text-align: center;
    font-size: 13px;
    }
}
.baseInfor-right{
    float:right;
.Aavatar_btn[data-v-07d34bd9]:before {
    content: "";
    width: 350px;
    height: 140px;
    position: absolute;
    top: 10px;
    left: -190px;
    background: url(/ecp-supply/_nuxt/img/button_addto_default.13c634b.png) center center no-repeat;
    background-size: 25px 25px;
    background-color: #f0f5fb;
    border: 1px dashed #ffffff;
    border-radius: 15px;
    }
    .Aavatar_btn[data-v-07d34bd9] {
        border:none;
    }
    span{
        color: #606266;
       position: relative;
       left: -270px; 
       top:10px;     
       float: left; 
    }
 }
}
</style>